<template>
    <div class="recommend">
        <div class="recommend-title">热销推荐</div>
        <ul>
            <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/'+item.id">
                <div class="item-img-wrapper">
                    <img width="100%" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详请</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'Recommend',
  props: {
    list: Array
  },
  data () {
    return {
      recommendList: [
        {id: '0001', imgUrl: 'http://img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_200x200_ce3d2658.jpg', title:'大连盛夏海洋世界', desc:'大连盛夏海洋世界'},
        {id: '0002', imgUrl: 'http://img1.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_200x200_36727f69.jpg', title:'大连盛夏海洋世界', desc:'大连盛夏海洋世界,浪漫大连首站'},
        {id: '0003', imgUrl: 'http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_200x200_8e27de70.jpg', title:'大连盛夏海洋世界', desc:'大连盛夏海洋世界'},
        {id: '0004', imgUrl: 'http://img1.qunarzz.com/sight/p0/1603/c7/c7788086a209ce3590.water.jpg_200x200_5b0e2a0f.jpg', title:'大连盛夏海洋世界', desc:'大连盛夏海洋世界'},
        {id: '0005', imgUrl: 'http://img1.qunarzz.com/sight/p0/1809/e4/e4871398e57096dba3.img.jpg_200x200_7b57c73e.jpg', title:'大连盛夏海洋世界', desc:'大连盛夏海洋世界'}
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .recommend
    .recommend-title
      margin-top: .2rem
      line-height: .8rem
      background: #eeeeee
      text-indent: .2rem
    .item
      display: flex
      height: 1.9rem
      .item-img-wrapper
        width: 1.7rem
        height: 1.7rem
        padding: .1rem
      .item-info
        flex: 1
        padding: .1rem
        min-width: 0   /* 宽度内容溢出技巧 */
        .item-title
          line-height: .54rem
          font-size: .32rem
          ellipsis()
        .item-desc
          line-height: .4rem
          color: #666666
          ellipsis()
        .item-button
          line-height: .44rem
          margin-top: .16rem
          background: #ff9300
          padding: 0 .2rem
          border-radius: .06rem
          color: #ffffff
</style>
